<template>
  <div class="AddOrUpdate_main add_container">
    <div class="main_main">
      <div class="main_main_left">
        <div class="main_main_left_header">用户</div>
        <el-tree
          ref="tree"
          :data="deptData"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="treeNodeClick"
        >
          <span slot-scope="{ node, data }" class="tree-node">
            <span class="node_name">{{ data.label }}</span>
          </span>
        </el-tree>
      </div>
      <div class="main_main_right">
        2
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { save, update, getById, treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/role'
import { selectUserByDeptId, treeselect as getDeptTree } from '@/api/system/dept'
export default {
  name: 'AddUser',
  props: {
    layerid: {},
    id: {}
  },
  data() {
    return {
      deptData: []
    }
  },
  mounted() {
    this.getDeptTree()
  },
  methods: {
    treeNodeClick(data) { // 点击树节点
      console.log(data)
      // selectUserByDeptId({deptId:}).then(res => {
      //   this.tableData = res.data
      //   this.total = res.total
      //   this.$nextTick(() => {
      //     this.setSelectRow(this)// 设置行选中
      //   })
      // })
    },
    getById() {
      const roleMenu = this.getRoleMenuTreeselect(this.id)
      getById(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        roleMenu.then(res => {
          const checkedKeys = res.checkedKeys
          checkedKeys.forEach((v) => {
            this.$nextTick(() => {
              this.$refs.menu.setChecked(v, true, false)

              this.loading = false
            })
          })
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.data = this.$refs.menu.getCheckedNodes(false, true)
          if (!this.id) { // 没有id就是新增
            save(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.getList() // 调用父组件的刷新方法
            })
          } else { // 有id就是编辑
            update(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.getList() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    getDeptTree() {
      getDeptTree().then(res => {
        this.deptData = res.data

        this.$nextTick(() => {
          document.querySelector('.el-tree-node__content').click()
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  display: flex;
  padding: 0;

  .main_main_left{
    padding: 10px 20px;
    width: 50%;

    border-right: 1px solid rgba(151, 151, 151, 0.2);

    .main_main_left_header{
      height: 40px;
      font-size: 14px;
      color: #333333;
      display: flex;justify-content: flex-start;align-items: center;
      border-bottom: 1px solid #387BFC;
    }
    .el-tree{
      padding-top: 20px;
    }
  }
  .main_main_right{
    width: 50%;
  }
}
</style>
